<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				margin: 80px auto;
				width: 200px;
				height: 200px;
				overflow: hidden;
			}

			img {
				width: 100%;
				transition: all 0.3s;
			}

			img:hover {
				transform: scale(1.2, 1.2);
			}
			
			
			
			li {
				float: left;
				width: 30px;
				height: 30px;
				margin: 20px;
				border: 1px solid skyblue;
				text-align: center;
				line-height: 30px;
				list-style: none;
				border-radius: 50%;
				transition: all 0.2s;
			}
			li:hover {
				transform: scale(1.5);
			}
			
		</style>
	</head>
	<body>
		<div>
			<img src="../images/images/xuanzhuan.png">
		</div>
		<h2>这就是图片放大的基本原理很简单</h2>
		
		<h2>实现按钮的放大效果</h2>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
		</ul>
	</body>
</html>
